<template>
  <div class="home" v-if="isShow">
    <div class="home-left">
      <div class="unified-alarm">
        <div class="title-tips"></div>
        <unified-alarm />
      </div>
      <div class="alarm-overview">
        <div class="title-tips"></div>
        <alarm-overview />
      </div>
      <div class="alarm-analysis">
        <div class="title-tips"></div>
        <alarm-analysis />
      </div>
    </div>
    <div class="home-right">
      <div class="system-overview">
        <div class="title-tips"></div>
        <system-overview />
      </div>
      <div class="approval-manage">
        <div class="title-tips"></div>
        <approval-manage />
      </div>
      <div class="service-center">
        <div class="title-tips"></div>
        <service-center />
      </div>
    </div>
  </div>
</template>

<script >
import UnifiedAlarm from "./components/unifiedAlarm";
import AlarmOverview from "./components/alarmOverview";
import SystemOverview from "./components/systemOverview";
import ServiceCenter from "./components/serviceCenter";
import AlarmAnalysis from "./components/alarmAnalysis";
import ApprovalManage from "./components/approvalManage";
import { getToken } from "@/utils/auth";
import { getAlarmLevelTotal } from "@/api/home/alarm.js";
export default {
  name: "home",
  components: {
    UnifiedAlarm,
    AlarmOverview,
    SystemOverview,
    ServiceCenter,
    AlarmAnalysis,
    ApprovalManage,
  },
  data() {
    return {
      isShow: false,
    };
  },
  methods: {

  },
  mounted() {
    getAlarmLevelTotal()
    if (getToken()) {
      this.isShow = true;
    }
  }
};
</script>

<style scoped lang="scss">
@function rem($args) {
  @return calc(100vh * #{$args} / 1080);
}

.home {
  display: flex;
  flex-direction: column;
  padding: rem(99) rem(15) rem(15);
  height: 100%;
  background: #dee5fc;
  color: #3d3d3d;
  font-size: rem(20);
  overflow: auto;

  &-left {
    height: 55%;
    display: flex;

    .unified-alarm {
      width: 33%;
      height: 100%;
      @extend .common-style;
    }

    .alarm-overview {
      width: 33%;
      height: 100%;
      margin: 0 rem(20);
      @extend .common-style;
    }

    .alarm-analysis {
      flex: 1;
      height: 100%;
      @extend .common-style;
    }
  }

  &-right {
    // flex: 1;
    height: 45%;
    display: flex;
    margin-top: rem(15);

    .system-overview {
      width: 33%;
      height: 100%;
      @extend .common-style;
    }

    .approval-manage {
      width: 33%;
      height: 100%;
      margin: 0 rem(20);
      @extend .common-style;
    }

    .service-center {
      flex: 1;
      height: 100%;
      @extend .common-style;
    }
  }

  .common-style {
    position: relative;
    padding: rem(15) rem(20);
    border-radius: rem(10);
    opacity: 1;
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid #dee5fc;
  }
}

::v-deep .el-tabs__item {
  padding: 0 rem(8);
  color: #666666;
  font-size: rem(20);
}

::v-deep .el-tabs__item.is-active {
  color: #436be4;
  background: none !important;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: #D9E2FF;
}

::v-deep .el-tabs__active-bar {
  background-color: #3a57b0;
}

::v-deep .el-timeline-item__node {
  background: #436be4;
  width: rem(10);
  height: rem(10);
}

::v-deep .el-timeline-item__tail {
  left: rem(3);
  border-left: 1px solid rgba(0, 3, 56, 0.08);
}

::v-deep .el-timeline-item__timestamp {
  color: #b0afb7;
}

::v-deep .el-timeline-item__content {
  display: flex;
  align-items: center;
  padding: rem(5) rem(10);
  align-self: stretch;
  background: #eff2fe;
  color: #666666;
}

::v-deep .el-timeline-item__content:hover {
  cursor: pointer;
}

::v-deep .el-button--medium {
  font-size: rem(20);
}

::v-deep .alarm-description {
  font-size: rem(20);
}
::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2){
  padding-left: 0 !important
}
</style>
<style lang="scss">
@function rem($args) {
  @return calc(100vh * #{$args} / 1080);
}

.main-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: rem(22);
  font-weight: 600;
  cursor: pointer;

  &-right {
    padding: rem(3) rem(10);
    font-size: rem(18);
    background: #1150a1;
    box-sizing: border-box;
    border-radius: rem(50);
    opacity: 1;
    color: #a3b7f3;

    &:hover {
      cursor: pointer;
    }
  }
}

.alarm-type {
  width: rem(30);
  height: rem(30);
  margin-right: rem(10);
  text-align: center;
  line-height: rem(30);
  border-radius: 50%;
  opacity: 1;
  /* 蓝色系/10 */
  background: #436be4;
  font-size: rem(16);
  color: #ffffff;
}

.title-tips {
  position: absolute;
  left: 0px;
  top: rem(15);
  width: rem(4);
  height: rem(19);
  border-radius: rem(3) 0 0 rem(3);
  opacity: 1;
  background: #436be4;
}
.statistics-title {
  font-size: rem(18);
}
.type-active {
  color: #436be4;
}
.title-class{
 margin-top:10px
}
</style>